{% extends "_base.html" %}
{% block title %}搜索列表{% endblock %}
{% block script %}
<script type="text/javascript" src="/static/script/Validate.js"></script>
<script type="text/javascript" src="/static/script/Page.js"></script>
<script>
$(function(){
    // 初始化列表
    var items = [
        {% for item_info in item_infos %}
            {
                "id": "{{item_info['id']}}",
                "itemname": "{{item_info['itemname']}}",
                "price": {{item_info['price']}},
                "tags": "{{', '.join(item_info['tags'])}}",
                "add_time": "{{item_info['add_time']}}",
                "owner_id": {{item_info['owner_id']}},
                "special": "{{item_info['special']}}",
            },
        {% endfor %}
        ];
    item_fill(items, "#item-list");
    
    // 注册按钮事件
    $(".item-button-detail").click(function(){
        link = $(this).attr("rel");
        location.href = link;
    });
    $(".item-button-special").click(function(){
        link = $(this).attr("rel");
        location.href = link;
    });

    // 搜索页相关
    form_list = {
        "#form-search-query" : check_query,
        "#form-search-price-min" : check_price,
        "#form-search-price-max" : check_price,
    };
    $("#form-search-submit").button().click(function(){
        res = check_search(form_list);
        if(!res){
            $("#dialog p").text("您有未填写完整的选项。");
            $("#dialog").dialog("open");
            return false;
        }
        return true;
    });
    check_by_dict(form_list);
});
</script>
{% endblock %}
{% block content %}
<!-- 列表模板，已隐藏 -->
<ul id="item-list-template">
    <li class="item-li" id="item-li-template">
        <div class="item-div-left">
            <img class="item-photo" src="" title="商品图片" />
        </div>
        <div class="item-div-middle">
            <div class="item-describe-row">
                <label class="item-title">商品名称：</label>
                <label class="item-value  item-name"></label>
            </div>
            <div class="item-describe-row">
                <label class="item-title">商品标签：</label>
                <label class="item-value item-tags"></label>
            </div>
            <div class="item-describe-row">
                <label class="item-title">商品价格：</label>
                <label class="item-value"><strong class="item-price"></strong>元</label>
            </div>
            <div class="item-describe-row">
                <label class="item-title">添加时间：</label>
                <label class="item-value item-time"></label>
            </div>
        </div>
        <div class="item-div-right">
            <div class="item-button-row">
                <button type="button" class="item-button item-button-detail" rel="/show?id=1">详情</button>
            </div>
            <div class="item-button-row item-button-row-special">
                <button type="button" class="item-button item-button-special">购买</button>
            </div>
        </div>
    </li>
</ul>
<!-- 搜索部分 -->
<div id="item-search">
    <form id="form-search" action="/search" method="get">
        <div class="item-search-text-row">
            <input type="text" id="form-search-query" class="input-text" name="query" value="{{search_info['query']}}"/>
            <input type="submit" id="form-search-submit" class="input-submit" value="搜索">
        </div>
        <div class="item-search-radio-row">
            <input class="item-search-radio" id="item-search-radio-name" type="radio" name="type" value="name" checked="checked"/>
            <label for="item-search-radio-name">商品名</label>
            <input class="item-search-radio" id="item-search-radio-tag" type="radio" name="type" value="tag"
            {% if search_info['type'] == 'tag' %}
                checked="checked"
            {% endif %}
            />
            <label for="item-search-radio-tag">标签名</label>
        </div>
        <div class="item-search-text-row">
            <label>价格范围</label>
            <input type="text" id="form-search-price-min" class="input-text input-text-price" name="price_min" value="{{search_info['price_min']}}" />
            <label>元</label>
            <label>—</label>
            <input type="text" id="form-search-price-max" class="input-text input-text-price" name="price_max" value="{{search_info['price_max']}}" />
            <label>元</label>
        </div>
    </form>
</div>
<!-- 显示的列表，动态填充 -->
<ul id="item-list">
</ul>
<ul id="page-row">
    {% for offset in range(0, item_count, page_size) %}
        <li
        onclick="ajaxGetPage(this, {{loop.index}}, '/psearch?offset={{offset}}&num={{page_size}}&query={{search_info['query']}}&type={{search_info['type']}}&price_min={{search_info['price_min']}}&price_max={{search_info['price_max']}}', '#item-list')" 
        {% if loop.first %}
            class="page-current"
        {% endif %}
        >{{loop.index}}</li>
    {% endfor %}
</ul>
{% endblock %}
